import createElement from "./createElement";
import updateChildern from "./updateChildern";

// 对比是否是同一个虚拟节点 对相同节点进行更新
export default function pathVnode(newVnode, oldVnode) {
  // 判断新旧vode是否同一个对象

  if (oldVnode === newVnode) {
    return;
  }
  // 判断vone 有没有text属性
  if (newVnode.text && (newVnode.childern === undefined) || !newVnode.childern.length) {
    // 新的newVnode有text属性
    console.log("新的newVnode有text属性");

    //
    if (newVnode.text !== oldVnode.text) {
      // 如果新虚拟节点的text和老的虚拟节点的text不同，那么直接让新的text写入老的elm中即可。
      // 如果老的elm中的childern，那么也会立即消失掉
      console.log(newVnode, oldVnode, "newVnode, oldVnode");

      oldVnode.elm.innerText = newVnode.text;
    }
  } else {
    console.log("新的newVnode没有text属性");
    // 老的有没有childern
    if (oldVnode.childern && oldVnode.childern.length) {
      // 老的有childern，此时是复杂的情况，就是新老都有childern进行 (需要进行精细化比较)
      console.log("新老都有childern需要精细化比较");
      updateChildern(oldVnode.elm, oldVnode.childern, newVnode.childern);
    } else {
      // 老的没有chilern 新的有childern
      console.log(newVnode.childern, "--");
      // 清空老节点的内容
      oldVnode.elm.innerText = "";
      // 编辑新的vode的子节点，创建dom上树
      for (let i = 0; i < newVnode.childern.length; i++) {
        const dom = createElement(newVnode.childern[i]);
        oldVnode.elm.appendChild(dom);
      }
    }
  }
}
